<template>
  <div class="login-setting">
    <el-form
      ref="userForm"
      :model="userInfo"
      label-width="120px"
      style="margin-left: 120px; margin-top: 30px"
    >
      <el-form-item label="姓名:">
        <el-input v-model="userInfo.username" style="width:300px" />
      </el-form-item>

      <el-form-item label="密码:">
        <el-input v-model="userInfo.password" type="password" style="width:300px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="updateFn">更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'LoginSetting',
  props: {
    // 要回显的员工详情对象
    userDetail: {
      type: Object,
      // ()代表直接返回的是一个空对象
      default: () => ({})
    }
  },
  data() {
    return {
      userInfo: {
        username: '',
        password: ''
      }
    }
  },
  watch: {
    // 外面传入的员工详情对象
    userDetail() {
      // 立刻给data赋值
      // this.userInfo.username = this.userDetail.username
      // this.userInfo.password = this.userDetail.password
      this.userInfo = this.userDetail
      // 因为我要保证下面更新的时候, userInfo里要有更多的参数名和值(包括id)
    }
  },
  methods: {
    // 更新按钮->点击事件
    updateFn() {
      this.$emit('updateEmpDetailEV', { ...this.userInfo })
      // 防止表单置空, 影响到左侧使用对象值问题
    }
  }
}
</script>

<style lang="scss" scoped></style>
